<template>
  <div class="login">
    <div class="heig"></div>
    <div class="bian">
      <el-menu :default-active="activeIndex2" class="el-menu-demo">
        <el-menu-item index="1">欧西森商城后台管理</el-menu-item>
      </el-menu>
      <el-radio-group v-model="labelPosition" size="small">
      </el-radio-group>
      <div style="margin: 20px;"></div>
      <el-form :label-position="labelPosition" label-width="70px" label-color="white" :model="formLabelAlign">
        <el-form-item label="账号">
          <el-input v-model="formLabelAlign.name" placeholder='请输入账号' class=" inp"
                    @keyup.enter.native="adminlogin"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password"  v-model="formLabelAlign.region" placeholder='请输入密码' class=" inp"
                    @keyup.enter.native="adminlogin"></el-input>
        </el-form-item>
        <div class="login_ang">
          <el-button type="primary" class="log_in" @click="adminlogintwo">登陆</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
  import bg from '@/assets/ecshop-bg.png'
  export default {
    name: 'login',
    components: {},
    data() {
      return {
        labelPosition: 'right',
        formLabelAlign: {
          name: '',
          region: '',
        },
        activeIndex2: '1',

      }
    },
    methods: {
      adminlogintwo() {
        this.ajaxretin()
      },
      adminlogin(ev) {
        if (ev.keyCode == 13) {
          this.ajaxretin()
        }
      },
      ajaxretin() {
        this.http.post({
          'api': 'login',
          'data': {
            'data': {
              "phone": this.formLabelAlign.name,
              "password": this.formLabelAlign.region,
            }
          }
        }).then((res) => {
          if (res.data.status_code == 200) {
            if (res.data.data[0].type == 1) {
              this.$store.commit("SetToken", res.data.data.token);
              this.$router.push({
                path: './homepage'
              })
            } else {
              this.$notify.error({
                title: '错误',
                message: '账号密码错误或者您不是后台管理员'
              });
            }
          }
        }, (err) => {
//          this.$notify.error({
//            title: '错误',
//            message: '账号密码错误或者您不是后台管理员'
//          });
          if (err) {
            this.$h.Ed(err, this);
          }
        })
      },
    },
    watch: {},
    computed: {
      //计算属性
    },
    mounted() {
      //生命周期
      document.body.style.background = `url(${bg})`;
      document.body.style.backgroundSize = 'cover';

    }
  }
</script>
<style scoped>
  .login {
    width: 100%;
    height: 100%;
    padding-top: 14%;
  }

  .bian {
    background: white;
    width: 500px;
    height: 300px;
    border: 1px solid gray;
    margin: auto;
  }

  .inp {
    width: 80%;
  }

  .login_ang {
    width: 25%;
    height: 50px;
    margin: auto;
  }

  .log_in {
    width: 100%;
  }

  .heig {
    height: 30%;
  }
</style>
